'use client';

import { IConfigOauthClient, IYwOauthClient } from '@/interfaces';

export default function QueryConfigOauthClient({
  details,
}: {
  details: IConfigOauthClient;
}) {
  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-info-square me-2"></i>
            客户端配置
          </div>
          <div className="card-body">
            <div className="table-responsive">
              <table className="table table-hover align-middle table-striped">
                <thead>
                  <tr className="text-nowrap">
                    <th scope="col" className="fw-normal">
                      ID
                    </th>
                    <th scope="col" className="fw-normal">
                      client
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {[...Object.keys(details)]
                    .filter((item) => !['id'].includes(item))
                    .map((item) => {
                      return (
                        <tr key={item} className="text-nowrap">
                          <td>
                            {item === 'showMenuEntry' && '是否显示菜单入口'}

                            {item === 'doc' && '接入文档地址'}

                            {item === 'ywClients' && '客户端列表'}
                          </td>
                          <td>
                            {item === 'showMenuEntry' && details[item] + ''}

                            {item === 'doc' && details[item]}

                            {item === 'ywClients' && (
                              <YwClients clients={details[item]} />
                            )}
                          </td>
                        </tr>
                      );
                    })}
                </tbody>
              </table>
            </div>

            {Object.keys(details).length === 0 && (
              <div className="text-center text-muted">暂无配置</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

const YwClients = ({ clients = [] }: { clients?: IYwOauthClient[] }) => {
  return (
    <>
      {clients.map((client, index) => {
        return (
          <div key={index} className="row">
            <div className="col">
              <div className="card">
                <div className="card-header bg-transparent text-muted">
                  <i className="bi bi-info-square me-2"></i>
                  客户端列表 {index + 1}
                </div>
                <div className="card-body">
                  <div className="table-responsive">
                    <table className="table table-hover align-middle table-striped">
                      <thead>
                        <tr className="text-nowrap">
                          <th scope="col" className="fw-normal">
                            ID
                          </th>
                          <th scope="col" className="fw-normal">
                            {index + 1}
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {[...Object.keys(client)]
                          .filter((item) => !['id'].includes(item))
                          .map((item) => {
                            return (
                              <tr key={item} className="text-nowrap">
                                <td>
                                  {item === 'enable' && '启用'}

                                  {item === 'clientId' && '客户端 Id'}

                                  {item === 'clientSecret' && '客户端 Secret'}

                                  {item === 'redirectUri' && '重定向地址'}

                                  {item === 'scope' &&
                                    '权限范围（英文逗号分隔）'}

                                  {item === 'state' && '状态'}

                                  {item === 'clientName' && '客户端名称'}

                                  {item === 'clientSite' && '客户端站点'}

                                  {item === 'clientLogo' && '客户端图标'}

                                  {item === 'imagePathPrefix' && '图片路径前缀'}

                                  {item === 'remark' && '备注'}
                                </td>
                                <td>
                                  {item === 'enable' && client[item] + ''}

                                  {item === 'clientId' && client[item]}

                                  {item === 'clientSecret' && client[item]}

                                  {item === 'redirectUri' && client[item]}

                                  {item === 'scope' && client[item]}

                                  {item === 'state' && client[item]}

                                  {item === 'clientName' && client[item]}

                                  {item === 'clientSite' && client[item]}

                                  {item === 'clientLogo' && client[item]}

                                  {item === 'imagePathPrefix' && client[item]}

                                  {item === 'remark' && client[item]}
                                </td>
                              </tr>
                            );
                          })}
                      </tbody>
                    </table>
                  </div>

                  {Object.keys(client).length === 0 && (
                    <div className="text-center text-muted">暂无配置</div>
                  )}
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </>
  );
};
